<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/icon/iconfont.css">
    <link rel="stylesheet" href="../static/css/post.css">
    <script src="../static/echarts.min.js"></script>
</head>

<main>
    <div class="title">
        <span>任职要求分析</span>
    </div>
    <hr>
    <div class="main-container" id="show" style="width:1000px;height:380px;overflow: hidden">
        <div id="chart1" style="width: 500px;height:400px; float:left"></div>
        <script  type="text/javascript">
            var myChart1 = echarts.init(document.getElementById('chart1'));
            myChart1.setOption({
                series : [
                    {
                    color: ['#3291e1','#FF69B4','#91c7ae',  '#CD5C5C','#FFA500', '#c873d3', '#61f8ff', '#FFB6C1','#3dfa57','#749f83','#FFD700', '#808080','#d2f09b', '#61a0a8', '#d48265', '#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
                    name: '工作经验要求',
                    type: 'pie',    // 设置图表类型为饼图
                    radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                    label:{
                            normal:{
                                formatter:'{d}%',
                                textStyle : {
                                    fontWeight : 'normal',
                                    fontSize : 10
                                }
                            }
                        },
                    data:[{% for exp in data %}{value:{{exp[1]}}, name:'{{exp[0]}}'},{% endfor %}],
                    roseType: 'angle',
                },

            ],
                legend:{
                        // orient:'vertical',
                        left:'10',
                        bottom:'20',
                        width:450,
                        data:[
                        {% for item in  data %} 
                            '{{item[0]}}',
                        {% endfor %}
                        ],
                        formatter:[
                            '{a|{name}}'
                        ].join('\n'),
                        textStyle:{
                            rich:{
                                a:{
                                    width:50,
                                    fontSize:10,
                                    lineHeight:10
                                }
                            }
                        }
                },
                title: {
                    text: '工作经验分析'
                },
            emphasis: { itemStyle: {
                // 高亮时点的颜色
                color: '#c4ccd3' },
                label: { show: true,
                // 高亮时标签的文字 formatter: '高亮时显示的标签内容'
                }
                }
            }
            )
        </script>

        <div id="chart2" style="width: 500px;height:400px; float:right"></div>
        <script type="text/javascript">
        var myChart2 = echarts.init(document.getElementById('chart2'));
        var option = {
                title: {
                    text: '学历要求分析'
                },
                tooltip: {},
                legend: {},
                xAxis: {
                    axisLabel: {
                        interval:0,
                        rotate:40
                    },
                    data: [{% for item in data1 %}"{{ item[0] }}",{% endfor %}]
                },
                yAxis: {},
                series: [{

                    type: 'bar',
                    itemStyle: {
                        normal: {
                            //这里是颜色
                            color: function(params) {
                                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                var colorList = ['#3291e1','#FF69B4','#91c7ae',  '#CD5C5C','#FFA500', '#c873d3', '#61f8ff', '#FFB6C1','#3dfa57','#749f83','#FFD700', '#808080','#d2f09b', '#61a0a8', '#d48265', '#749f83', '#ca8622'];
                                var index;
                                //给大于颜色数量的柱体添加循环颜色的判断
                                if (params.dataIndex >= colorList.length) {
                                    index = params.dataIndex - colorList.length;
                                    return colorList[index];
                                }
                                return colorList[params.dataIndex];
                            }
                        }
                    },
                    data: [{% for item in data1 %}{{ item[1] }},{% endfor %}]
                }]
            };
            myChart2.setOption(option);
        </script>
    </div>
</main>
</html>